<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑持仓数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@3.2.15/dist/antd.min.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@3.2.15/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.3/dist/axios.min.js"></script>
    <style>
        .container {
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        .header {
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        .form-item {
            margin-bottom: 16px;
        }
        .form-button-group {
            margin-top: 30px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <div class="title">[[ isEdit ? '编辑持仓' : '新增持仓' ]]</div>
            <a-button @click="goBack">返回</a-button>
        </div>
        
        <a-form
            :model="formData"
            :rules="rules"
            ref="formRef"
            layout="vertical"
        >
            <a-form-item
                label="持仓代码"
                name="code"
                class="form-item"
            >
                <a-input
                    v-model:value="formData.code"
                    placeholder="请输入持仓代码"
                    :disabled="isEdit"
                />
            </a-form-item>
            
            <a-form-item
                label="持仓名称"
                name="name"
                class="form-item"
            >
                <a-input
                    v-model:value="formData.name"
                    placeholder="请输入持仓名称"
                />
            </a-form-item>
            
            <a-form-item
                label="跟踪指数代码"
                name="refcode"
                class="form-item"
            >
                <a-input
                    v-model:value="formData.refcode"
                    placeholder="请输入跟踪指数代码"
                />
            </a-form-item>
            
            <a-form-item
                label="跟踪指数名称"
                name="refname"
                class="form-item"
            >
                <a-input
                    v-model:value="formData.refname"
                    placeholder="请输入跟踪指数名称"
                />
            </a-form-item>
            
            <div class="form-button-group">
                <a-button @click="resetForm">重置</a-button>
                <a-button type="primary" @click="submitForm">保存</a-button>
            </div>
        </a-form>
    </div>
    
    <script>
        const { createApp, ref, reactive, onMounted, computed } = Vue;
        const { message, notification } = antd;
        
        const app = createApp({
            setup() {
                const formRef = ref(null);
                const isEdit = ref(false);
                const formData = reactive({
                    id: null,
                    code: '',
                    name: '',
                    refcode: '',
                    refname: ''
                });
                
                const rules = {
                    code: [
                        { required: true, message: '请输入持仓代码', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_]+$/, message: '持仓代码只能包含字母、数字和下划线', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入持仓名称', trigger: 'blur' },
                        { max: 50, message: '持仓名称最多50个字符', trigger: 'blur' }
                    ],
                    refcode: [
                        { required: true, message: '请输入跟踪指数代码', trigger: 'blur' },
                        { max: 20, message: '跟踪指数代码最多20个字符', trigger: 'blur' }
                    ],
                    refname: [
                        { required: true, message: '请输入跟踪指数名称', trigger: 'blur' },
                        { max: 50, message: '跟踪指数名称最多50个字符', trigger: 'blur' }
                    ]
                };
                
                // 解析URL参数
                const getUrlParams = () => {
                    const params = {};
                    const url = window.location.href;
                    const paramStr = url.split('?')[1];
                    if (paramStr) {
                        const paramPairs = paramStr.split('&');
                        paramPairs.forEach(pair => {
                            const [key, value] = pair.split('=');
                            params[decodeURIComponent(key)] = decodeURIComponent(value);
                        });
                    }
                    return params;
                };
                
                // 加载编辑数据
                const loadEditData = () => {
                    const params = getUrlParams();
                    if (params.id) {
                        isEdit.value = true;
                        // 从服务器加载数据
                        axios.get(`/cave/detail/${params.code}`)
                            .then(response => {
                                if (response.data.success && response.data.data) {
                                    const data = response.data.data;
                                    formData.id = data.id;
                                    formData.code = data.code;
                                    formData.name = data.name;
                                    formData.refcode = data.refcode;
                                    formData.refname = data.refname;
                                } else {
                                    message.error(response.data.message || '加载数据失败');
                                }
                            })
                            .catch(error => {
                                console.error('加载数据失败:', error);
                                message.error('加载数据失败');
                            });
                    }
                };
                
                // 重置表单
                const resetForm = () => {
                    if (formRef.value) {
                        formRef.value.resetFields();
                    }
                };
                
                // 返回列表页面
                const goBack = () => {
                    window.location.href = '/cave/list';
                };
                
                // 提交表单
                const submitForm = () => {
                    formRef.value.validate().then(() => {
                        axios.post('/cave/save', formData)
                            .then(response => {
                                if (response.data.success) {
                                    message.success('保存成功');
                                    // 延迟返回，让用户看到成功提示
                                    setTimeout(() => {
                                        goBack();
                                    }, 1000);
                                } else {
                                    message.error(response.data.message || '保存失败');
                                }
                            })
                            .catch(error => {
                                console.error('保存失败:', error);
                                message.error('保存失败');
                            });
                    }).catch(error => {
                        console.log('表单验证失败:', error);
                    });
                };
                
                // 初始化
                onMounted(() => {
                    loadEditData();
                });
                
                return {
                    formRef,
                    formData,
                    rules,
                    isEdit,
                    resetForm,
                    goBack,
                    submitForm
                };
            }
        });
        
        app.use(antd);
        app.mount('#app');
    </script>
</body>
</html>